<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()+ path + "/";
%>
<html>
	 <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
        <meta name="format-detection" content="telephone=no">
        <meta charset="UTF-8">
        <meta name="description" content="Violate Responsive Admin Template">
        <meta name="keywords" content="Super Admin, Admin, Template, Bootstrap">
        <link href="<%=path %>/assets2/js/bootstrap-table.css" rel="stylesheet">
        <script src="<%=path %>/assets2/js/jquery-1.11.1.min.js"></script>
        <script src="<%=path %>/assets2/js/bootstrap-table.js"></script>
   		<script src="<%=path %>/assets2/js/locale/bootstrap-table-zh-CN.js"></script>
   		<script src="<%=path %>/assets2/js/bootstrap.min.js"></script>
    </head>
<div class="row">
	<ol class="breadcrumb">
		<li><a href="<%=path%>/index"><span
				class="glyphicon glyphicon-home"></span></a></li>
		<li class="active">论坛分类管理</li>
	</ol>
</div>

<div class="panel panel-default">
	<div class="panel-heading">分类列表</div>
	<div class="panel-body" id="imgID">
		<form id="formSearch" class="form-horizontal">
			<div class="form-group" style="margin-top: 15px">
				<label class="control-label col-sm-2"
					for="className">分类名称</label>
				<div class="col-sm-2">
					<input type="text" class="form-control" id="className">
				</div>
				<div class="col-sm-1" style="text-align: left;">
					<button type="button" style="margin-left: 50px" id="btn_query"
						class="btn btn-primary" onclick="serachUser()">查询</button>
				</div>
				
			</div>
		</form>
		<div style="text-align: left;">
			<button type="button" class="btn btn-primary"
				onclick="addClassInfo()">
				<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增分类
			</button>
		</div>
		<table id="tabId"></table>
	</div>
</div>

<script type="text/javascript">
   $(function () {
	    //1.初始化Table
	    var oTable = new TableInit();
	    oTable.Init();
	    //2.初始化Button的点击事件
	    var oButtonInit = new ButtonInit();
	    oButtonInit.Init();
	});
	var TableInit = function () {
	    var oTableInit = new Object();
	    //初始化Table
	    oTableInit.Init = function () {
	        $('#tabId').bootstrapTable({
	            url: '<%=path %>/liveManager/getClassInfoList',         //请求后台的URL（*）
	            method: 'get',                      //请求方式（*）
	            toolbar: '#toolbar',                //工具按钮用哪个容器
	            striped: false,                      //是否显示行间隔色
	            cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
	            pagination: true,                   //是否显示分页（*）
	            sortable: false,                     //是否启用排序
	            sortOrder: "asc",                   //排序方式
	            queryParams: oTableInit.queryParams,//传递参数（*）
	            sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
	            pageNumber:1,                       //初始化加载第一页，默认第一页
	            pageSize: 10,                       //每页的记录行数（*）
	            pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
	            search: false,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
	            strictSearch: false,
	            showColumns: false,                  //是否显示所有的列
	            showRefresh: false,                  //是否显示刷新按钮
	            minimumCountColumns: 2,             //最少允许的列数
	            clickToSelect: false,                //是否启用点击选中行
	            uniqueId: "classId",                     //每一行的唯一标识，一般为主键列
	            showToggle:false,                    //是否显示详细视图和列表视图的切换按钮
	            cardView: false,                    //是否显示详细视图
	            detailView: false,                   //是否显示父子表
	            columns: [/* {
	            	checkbox: true, // 显示一个勾选框
	                align: 'center', // 居中显示
	                
	            }, */ {
	                field: 'classId',
	                title: '分类ID',
	                width:100,
	                align: 'center', // 左右居中
	                valign: 'middle' // 上下居中
	            },{
	                field: 'className',
	                title: '分类名称',
	                width:100,
	                align: 'center', // 左右居中
	                valign: 'middle' // 上下居中
	            }, {
	                field: 'classIntro',
	                title: '分类描述',
	                align: 'center', // 左右居中
	                valign: 'middle' // 上下居中
	            }, {
	                field: 'createDate',
	                title: '创建时间',
	                align: 'center', // 左右居中
	                valign: 'middle' // 上下居中
	            }, {
	                field: 'state',
	                title: '状态',
	                align: 'center', // 左右居中
	                valign: 'middle', // 上下居中
	                formatter:stateFormatter
	            },{
	                field: 'classId',
	                title: '操作',
	                align: 'center', // 左右居中
	                valign: 'middle', // 上下居中
	                formatter: operateFormatter //自定义方法，添加操作按钮
	            }]
	        });
	    };

	//得到查询的参数
	oTableInit.queryParams = function (params) {
	        var temp = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
	            limit: params.limit,   //页面大小
	            offset: params.offset,  //页码
	            className: $("#className").val(),
	        };
	        return temp;
	    };
	    return oTableInit;
	};
	//查询
	function serachUser() {
        $("#tabId").bootstrapTable('refresh',{pageNumber:1});
    };
	var ButtonInit = function () {
	    var oInit = new Object();
	    var postdata = {};
	    oInit.Init = function () {
	        //初始化页面上面的按钮事件
	    };
	    return oInit;
	};
	
	//状态
	function stateFormatter(value, row, index){
		str = '';
		if(row.state==1){
			str = '<span>正常<span>';
		}else{
			str = '关闭';
		}
		return str;
	};
	//操作判断
	function operateFormatter(value, row, index) {
		var str = '';
		str = '<span style="cursor: pointer;" onclick="editClassInfo('+value+',\''+row.className+'\')">编辑</span>';
		return str;
	};
	//编辑分类
	function editClassInfo(id,className){
		var html = '<br><div class="col-md-12">'
			+'<label class="control-label col-md-4">原分类名称</label>'
			+'<div class="col-md-8"><input type="text" class="form-control"  value="'+className+'" id="classNameOld" disabled="disabled">'
			+'</div></div>'
		    + '<br><br><br><div class="col-md-12">'
			+'<label class="control-label col-md-4">新分类名称</label>'
			+'<div class="col-md-8"><input type="text" class="form-control" id="classNameNew">'
			+'</div></div>';
			//页面层
			layer.open({
			  type: 1,
			  title:'论坛分类编辑',
			  shadeClose:true,
			  content: html,
			  btn: ['编辑', '取消'],
			  btn1: function(){
				  var classNameNew = $("#classNameNew").val();
					if(classNameNew==null||classNameNew==''){
						//tips层
						layer.tips('新分类名称不能为空~', '#classNameNew');
						return false;
					}else if(classNameNew==className){
						//tips层
						layer.tips('新分类名称不能与旧分类名称相同', '#classNameNew');
						return false;
					}else{
						$.ajax({
							 type:"POST",
					         url: "<%=path %>/liveManager/updateClassInfo",
					         data: {"classId":id,"className":classNameNew},
					         dataType: 'json',
					         success: function(data,status,xhr){
					        	 layer.closeAll();
					        	 if(data==1){
					        		 swal({ 
							   			  title: "提交成功", 
							   			  text: "编辑分类成功", 
							   			  type: "success",
							   			},function(){
							   			 	$("#tabId").bootstrapTable('refresh');
							   			});
					        	 }else{
					        		 swal({ 
							   			  title: "提交失败", 
							   			  text: "编辑分类失败", 
							   			  type: "error",
							   			}); 
					        	 }
					         },error:function (){
					        	 layer.closeAll();
					        	 swal({ 
						   			  title: "提交失败", 
						   			  text: "网络错误,请稍后尝试~", 
						   			  type: "error",
						   			});
					         }
						});
				}
			  }
			});
	};
	//新增分类
	function addClassInfo(){
		var html = '<br><div class="col-md-12">'
			+'<label class="control-label col-md-4">分类名称</label>'
			+'<div class="col-md-8"><input type="text" class="form-control"  id="classNameTwo">'
			+'</div></div>'
		    + '<br><br><br><div class="col-md-12">'
			+'<label class="control-label col-md-4">分类描述</label>'
			+'<div class="col-md-8"><input type="text" class="form-control" id="classIntro" maxlength="30">'
			+'</div></div>';
			//页面层
			layer.open({
			  type: 1,
			  title:'新增分类',
			  shadeClose:true,
			  content: html,
			  btn: ['添加', '取消'],
			  btn1: function(){
				  var classNameTwo = $("#classNameTwo").val();
				  var classIntro = $("#classIntro").val();
					if(classNameTwo==null||classNameTwo==''){
						//tips层
						layer.tips('分类名称不能为空~', '#classNameTwo');
						return false;
					}else if(classIntro==null||classIntro==''){
						//tips层
						layer.tips('分类描述不能为空~', '#classIntro');
						return false;
					}else{
						$.ajax({
							 type:"POST",
					         url: "<%=path %>/liveManager/addClassInfo",
					         data: {"className":classNameTwo,"classIntro":classIntro},
					         dataType: 'json',
					         success: function(data,status,xhr){
					        	 if(data==1){
					        		 layer.closeAll();
					        		 swal({ 
							   			  title: "提交成功", 
							   			  text: "添加分类成功", 
							   			  type: "success",
							   			},function(){
							   			 	$("#tabId").bootstrapTable('refresh');
							   			});
					        	 }else if(data==-1){
					        		 layer.msg('分类名称已存在~');
					        	 }else{
					        		 layer.closeAll();
					        		 swal({ 
							   			  title: "提交失败", 
							   			  text: "添加分类失败", 
							   			  type: "error",
							   			}); 
					        	 }
					         },error:function (){
					        	 layer.closeAll();
					        	 swal({ 
						   			  title: "提交失败", 
						   			  text: "网络错误,请稍后尝试~", 
						   			  type: "error",
						   			});
					         }
						});
				}
			  }
			});
	}
</script>
</html>